<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拉拉货物流有限公司</title>
		<meta name="keywords" content="拉拉货物流有限公司,汕头物流配送,汕头物流,汕头物流货运,汕头货运,全国货运,厦门物流配送,深圳物流配送,广州物流配送,物流配送,物流货运,货运配送" />
	    <meta name="description" content="拉拉货物流有限公司是一家承接全国各地门到门配送业务的专业第三方物流，为企业量身定做仓储、配送物流方案，针对大小客户配备专业项目小组进行专人专车对接。" />
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	    <link rel="stylesheet" href="css/amazeui.min.css" type="text/css" />
	    <link rel="stylesheet" href="css/style.css" type="text/css" />
	    <script type="text/javascript" src="js/jquery.min.js" ></script>
	    <script type="text/javascript" src="js/amazeui.min.js" ></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body class="bgcolor">
		<header data-am-widget="header" class="am-header am-header-default header-green1">
	      <div class="am-header-left am-header-nav ">
		        <a href="javascript:history.back()" style="color: #fff;"><i class="am-icon-chevron-left"></i></a>
	        </div>
		  <h1 class="am-header-title" style="color: #fff;">订单</h1>
       </header>
       <div class="jl"></div>
	   <div id="orlist" >
       <ul class="order" id="ChoiceStatus">
       	 <li :class="jxz"><a @click="jinxingzhong">进行中</a></li>
		 <li :class="wzf"><a  @click="weizhifu">未支付</a></li>
       	 <li :class="ywc"><a @click="yiwancheng">已完成</a></li>
       	 <li :class="yqx"><a @click="yiquxiao">已取消</a></li>
       </ul>
       <ul class="order-list" >
       	 <li v-for="order in orders">
       	 	<p class="time" >{{order.orderDetail}}</p>
       	 	<p class="address"><i class="iconfont">&#xe600;</i>{{order.startSite}} — {{order.endSite}}</p>
       	 	<p class="cx"><i class="iconfont">&#xe612;</i>{{order.goodsName}}  {{order.goodsVolume}}m³  {{order.goodsNumber}}kg</p>
       	 		<button type="button" class="order-btn"  @click="toDetail(order)">订单详情</button> <br>
				<button v-if="order.status==0" type="button" style="position: relative;left: 290px; top: 10px; background-color: darkslateblue;width: 75px;" @click="qxdingdan(order)" ><font size="" color="white">取消订单</font> </button>
				<button v-if="order.status==2" type="button" style="position: relative;left: 220px;top: 25px; background-color: brown;width: 60px;" @click="pinglun(order)" ><font size="" color="white">评论</font> </button> <br>
				<button v-if="order.status==2" type="button" style="position: relative;left: 300px; background-color: #BE590A;width: 60px;" @click="tousu(order)" ><font size="" color="white">投诉</font> </button>
       	 </li>
       </ul>
	    </div>
       <div class="jl"></div>
		 <div data-am-widget="navbar" class="am-navbar  dream-foot am-no-layout" id="">
		      <ul class="am-navbar-nav1 am-cf am-avg-sm-5">   
		          <li>
		            <a href="index2.html" class="">
		                <span class="iconfont">&#xe60b;</span>
		                <p class="am-navbar-label">首页</p>
		            </a>
		          </li>
		          <li>
		            <a href="nearby.html" class="">
		                <span class="iconfont">&#xe60c;</span>
		                <p class="am-navbar-label">我的位置</p>
		            </a>
		          </li>
		       <li>
		            <a  class="curr">
		                <span class="add"><i class="iconfont" style="font-size: 30px; line-height: 40px;">&#xe60e;</i></span>
		                <p class="am-navbar-label" style="margin-top: -36px;"></p>
		            </a>
		          </li>
		          <li>
		            <a href="message.html" class="">
		                <span class="iconfont">&#xe60d;</span>
		                <p class="am-navbar-label">新消息</p>
		            </a>
		          </li>
		          <li>
		            <a href="member.html" class="">
		                <span class="iconfont">&#xe609;</span>
		                <p class="am-navbar-label">个人中心</p>
		            </a>
		          </li>
		      </ul>
		</div>
	</body>

	<script>
		var url=JSON.parse(sessionStorage.getItem("url"))
		var user=JSON.parse(sessionStorage.getItem("user"))
		var vu=new Vue({
			  el:'#orlist',
			 data:{
				 orders:[],
				 message:"你好哦",
				 jxz:'',
				 wzf:'',
				 ywc:'',
				 yqx:''
				 
			 },
			 mounted:function(){
			 	this.jinxingzhong(),
				this.jxz="current"
				
			 },
			 methods: {
				 qxdingdan:function(ord){
					 axios.get(url+"/clientOrder/updateStatus?id="+ord.id).then(
					 function(r){
						  location.href='order.html'	
					 })
					
				 },
				 
				 pinglun:function(order){
					 
					 
					 var ord=JSON.stringify(order);
					 sessionStorage.setItem("order",ord);
					 location.href='feedback.html'		
					 
				 },
				 tousu:function(order){
					 var ord=JSON.stringify(order);
					 sessionStorage.setItem("order",ord);
				 		location.href='complaint.html'		 
				 					 
				 },
				 jinxingzhong:function(){
					 this.wzf=""
					 this.jxz="current"
					 this.ywc=''
					 this.yqx=''
					 var that=this
					  axios.get(url+'/clientOrder/list?clientId='+user.id+'&'+'status='+1).then(
					   function(r){
						   if(r.data.code==200){
							    console.log("bbbc")
							   that.orders=r.data.data
							   } 
							   },function(error){
								   
							   })
							   },
				weizhifu:function(){
					this.wzf="current"
					this.jxz=""
					this.ywc=''
					this.yqx=''
					var that=this
					axios.get(url+'/clientOrder/list?clientId='+user.id+'&'+'status='+0).then(
					 function(r){
											   if(r.data.code==200){
												    console.log("bbbc")
												   that.orders=r.data.data
												   } 
												   },function(error){
													   
												   })
					
				},
				yiwancheng:function(){
					this.wzf=""
					this.jxz=""
					this.ywc='current'
					this.yqx=''
					var that=this
					axios.get(url+'/clientOrder/list?clientId='+user.id+'&'+'status='+2).then(
					 function(r){
											   if(r.data.code==200){
												    console.log("bbbc")
												   that.orders=r.data.data
												   } 
												   },function(error){
													   
												   })
					
				}	,
				yiquxiao:function(){
					this.wzf=""
					this.jxz=""
					this.ywc=''
					this.yqx='current'
					var that=this
					axios.get(url+'/clientOrder/list?clientId='+user.id+'&'+'status='+3).then(
					 function(r){
											   if(r.data.code==200){
												    console.log("bbbc")
												   that.orders=r.data.data
												   } 
												   },function(error){
													   
												   })
					
				},
							toDetail:function(order){


								var ord=JSON.stringify(order);
								sessionStorage.setItem("order",ord);
								location.href="orderDetail.html"

							}
							   
							   
							   }
		
		  }) 
		  
		 
		  
		  </script>
</html>